import React, { useRef } from 'react';
import { connect } from 'umi';
import { SwitchTransition, CSSTransition } from 'react-transition-group';
import './index.less';

export default connect(({ menu }) => ({ crumbList: menu.crumbList }))(({ crumbList }) => {
  const nodeRef = useRef(null);
  return (
    <SwitchTransition>
      <CSSTransition
        key={_.last(crumbList)?.id}
        nodeRef={nodeRef}
        classNames="bread-crumb-fade"
        addEndListener={(done) => {
          nodeRef.current.addEventListener('transitionend', done, false);
        }}
      >
        <span ref={nodeRef} className="bread-crumb-item">
          {_.map(crumbList, 'label').join(' / ')}
        </span>
      </CSSTransition>
    </SwitchTransition>
  );
});
